<template>
	<view class="upload">
		<view class="slot-btn" @click="handleSuccessVideo" v-if="!video && videoMultipleFlag === false">
			<u-icon name="plus" size="48" color="#c7c7cc"></u-icon>
		</view>
		<view class="video">
			<video v-if="video" controls="controls" :src="video" class="avatar"></video>
			<u-icon v-if="video" name="close-circle-fill" size="40" color="red" labelColor="white"
				class="avatar-uploader-icon-error" @click="delVideo"></u-icon>
		</view>
		<view class="tip">{{$t('goods.videoRestriction')}}</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL,
		TOKENNAME
	} from '@/config/app';
	import {mapGetters} from 'vuex'
	export default {
		props:{
			value:{}
		},
		watch:{
			value(new1,old){
				var that=this
				if(new1){
					that.video=new1
				}
			}
		},
		// beforeMount(){
		// 	console.log(this.value,111)
		// 	if(this.value){
		// 		this.video=this.value
		// 	}
		// },
		data() {
			return {
				video: '',
				videoMultipleFlag: false
			}
		},
		computed:mapGetters(['token']),
		methods: {
			// 上传视频
			handleSuccessVideo() {
				var that = this
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					extension:['mp4','3gp','m3u8'],
					maxDuration: 15,
					success: function(res) {
						const isLt30M = res.size / 1024 / 1024 < 30;
						if (!isLt30M) {
							that.$util.Tips({
								title: '上传视频文件大小不能超过 30MB!'
							})
							return
						}
						uni.showLoading({
							title: '上传中'
						})
						uni.uploadFile({
							name:'multipart',
							filePath: res.tempFilePath,
							url: HTTP_REQUEST_URL + "api/admin/upload/oss/video?model=mcstore&pid=10",
							fileType: "video",
							header: {
								"Content-Type": "multipart/form-data",
								"accept": "application/json",
								[TOKENNAME]:that.token,
								"Identification": 'APP'
							},
							success(res1) {
								const data=JSON.parse(res1.data)
								console.log(data)
								if(!data.data){
									return that.$util.Tips({title: '请上传mp4、3gp、m3u8格式的视频'})
								}
								that.video=data.data.url
								that.$emit('videoUrl', that.video)
								uni.hideLoading()
								that.$util.Tips({title: '上传成功'})
							},
							fail(err){
								that.$util.Tips({title: err})
							}
						})
					}
				})
			},
			delVideo(){
				this.video=''
				this.$emit('videoUrl', this.video)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload {
		.slot-btn {
			width: 112rpx;
			height: 112rpx;
			padding: 30rpx;
			border: 1rpx solid #c7c7cc
		}

		.video {
			position: relative;
			width: 150px;

			.avatar {
				width: 148px;
				height: 148px;
				display: block;
				object-fit: cover;
			}

			.avatar-uploader-icon-error {
				position: absolute;
				right: -7rpx;
				top: -8rpx;

			}
		}
		.tip{
			color: #999;
			font-size: 24rpx;
			padding:20rpx 0rpx;
		}
	}
</style>
